<template>
  <div class="homecourse">
    <div class="course_text">
      <span @click="goPage('/course')" :class="{active: url_path === '/course'}">申请游泳培训</span>
    </div>
    <div @click="goPage('/course')" :class="{active: url_path === '/course'}">
      <div class="img_div"><img src="../assets/img/courses/index_lession_child.png" class="img_img" alt=""></div>
      <div class="img_div"><img src="../assets/img/courses/index_lession_baby.jpg" class="img_img" alt=""></div>
      <div class="img_div"><img src="../assets/img/courses/index_lession_adult.jpg" class="img_img" alt=""></div>
      <div style="clear: both"></div>
    </div>


  </div>
</template>

<script>
export default {
  name: "HomeCourse",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
  }
}
</script>

<style scoped>
.homecourse {
  width: 1200px;
  margin: 0 auto;

}

.course_text {
  width: 1200px;
  height: 50px;
  text-align: center;
  font-size: 35px;
  background-color: #42a0de;
  opacity: 0.6;
  color: chartreuse;
}

.img_div {
  float: left;
  width: 400px;
  height: 486px;
}

.img_img {
  width: 100%;
}

div img {
  cursor: pointer;
  transition: all 0.5s;
}

div img:hover {
  transform: scale(1.035);
}

</style>